

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
     
    <link rel="stylesheet"  href="user.css">
    <script src="./js/vue.global.js"></script>

   
        <link rel="stylesheet" href="./js/index1.css" />
        <script src="./js/index.full.js"></script>
 <style>
    .main{
        width: 1200px;
        margin: 0 auto;
       
        background-color: white;  
    }
    ul{
        list-style: none;
    }
    a{
        color:green;
        text-decoration: none;
    }
    #xiabiao :hover{
            color:green;
            
    }
   
 </style>
</head>
<body>
    <div id="app">
        
            <el-container style=" background-color: #f5f5f5; width: 1200px;margin: 0 auto;">
              
            <el-header style=" background-color: #fff;">
                <el-row style="display: flex;align-items:center">
                <el-col :span="8" style="display: flex;">
                     <div>
                          <el-image style="width: 60px; height:60px" src="img/u128.png">
                     </div>    
                     <div>
                        <h1 style="padding-left:20px;">双碳招投标网</h1>
                     </div>
                </el-col>
                    <el-col :span="12">
                        <el-menu mode="horizontal" style="border:0!important;">
                            <el-menu-item id="xiabiao"><h3><a href="./pingtaidongtai.html">平台动态</a></h3></el-menu-item>
                            <el-menu-item id="xiabiao"><h3><a href="./zhengcefagui.html">政策法规</a></h3></el-menu-item>
                            <el-menu-item id="xiabiao"><h3><a href="./weiguitousu.html">违规投诉</a></h3></el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col :span="4" ><a href="./gerenzhongxin.html">
                        <el-image style="width: 50px;height:50px;float: left;position: relative;top:10px;left: 20px;" src="img/u122.png"></el-image>
                    </a>
                        <h3 style="float: left;position: relative;left: 50px;top: 5px;">admin</h3>
                    </el-col>
                    
                   </el-row>
            </el-header>
                <el-main class="main">
                    <el-carousel height="200px" style="border-radius:20px;">
                        <el-carousel-item v-for="item in carousels">
                            <img v-bind:src="item" width="100%" height="100% ">
                        </el-carousel-item>    
                    </el-carousel>



                      <el-row  style="margin: 40px;">
                        <el-col :span="12">
                            <div style="background:linear-gradient(to right,lightgreen,white)">
                                <el-text size="large" type="primary">招标预告</el-text>
                                <el-text size="small" style="float:right;margin-right:10px"><a href="./gonggaoliebiao.html">更多</a></el-text>
                            </div>
                                    <table width="500px">
                                        <tr v-for=" post in postList1">
                                            <td><img v-bind:src=post.img></td>
                                            <td>{{post.title}}</td>
                                            <td>{{post.date}}</td>
                                        </tr>
                                    </table>
                               
                        </el-col>




                        <el-col :span="12" >
                            <div style="background:linear-gradient(to right,lightgreen,white)">
                                <el-text size="large" type="primary">招标公告</el-text>
                                <el-text size="small" style="float:right;margin-right:10px">更多</el-text>
                            </div>
                            <table width="500px">
                                <tr v-for=" post in postList2">
                                    <td><img v-bind:src=post.img></td>
                                    <td>{{post.title}}</td>
                                    <td>{{post.date}}</td>
                                </tr>
                            </table>

                        </el-col>
                        <el-col :span="12" >
                            <div style="background:linear-gradient(to right,lightgreen,white)">
                                <el-text size="large" type="primary">中标公告</el-text>
                                <el-text size="small" style="float:right;margin-right:10px">更多</el-text>
                            </div>
                            <table width="500px">
                                <tr v-for=" post in postList3">
                                    <td><img v-bind:src=post.img></td>
                                    <td>{{post.title}}</td>
                                    <td>{{post.date}}</td>
                                </tr>
                            </table>

                        </el-col>
                        <el-col :span="12" >
                            <div style="background:linear-gradient(to right,lightgreen,white)">
                                <el-text size="large" type="primary">企业采购</el-text>
                                <el-text size="small" style="float:right;margin-right:10px">更多</el-text>
                            </div>
                            <table width="500px">
                                <tr v-for=" post in postList4">
                                    <td><img v-bind:src=post.img></td>
                                    <td>{{post.title}}</td>
                                    <td>{{post.date}}</td>
                                </tr>
                            </table>

                        </el-col>
                      </el-row>
                </el-main>
                 
            </el-container>
           
          
    </div>
</body>
  <script>
       const App={
        data(){
   return{
        carousels:['./img/swiper1.png',
                   './img/swiper2.png',
                   './img/swiper3.png',
                   ],
       postList1:[
           {img:'./img/u19.png',title:"[麻城市中心] 麻城经济开发区湛家园小学...",date:'2023-04-13'},
           {img:'./img/u19.png',title:"[麻城市中心] 麻城市农村公路管理局招标...",date:'2023-04-13'},
           {img:'./img/u19.png',title:"[麻城市中心] 麻城经济开发区湛家园小学...",date:'2023-04-13'},
           {img:'./img/u19.png',title:"[汉川市中心] 汉川电厂四期扩建工程电力...",date:'2023-04-13'},
           {img:'./img/u19.png',title:"[红安县中心] 红安县2023年度小型水库安...",date:'2023-04-13'},
    ],
    postList2:[
           {img:'./img/u19.png',title:"平煤隆基新能源科技有限公司--二期电...",date:'2023-04-13'},
           {img:'./img/u19.png',title:"[2023年第四批电器杂项备件询比采购...",date:'2023-04-13'},
           {img:'./img/u19.png',title:"平煤隆基新能源科技有限公司--二期电...",date:'2023-04-13'},
           {img:'./img/u19.png',title:"云南省中医医院污水运维项目咨询邀请公告...",date:'2023-04-13'},
           {img:'./img/u19.png',title:"平煤隆基新能源科技有限公司--二期电......",date:'2023-04-13'},
    ],
    postList3:[
           {img:'./img/u19.png',title:"山东省淄博市山东兴泉医药有限公司线路迁...",date:'2023-04-13'},
           {img:'./img/u19.png',title:"张家界旅游学校关于果盆/果篮网上..",date:'2023-04-13'},
           {img:'./img/u19.png',title:"[麻城市中心] 麻城经济开发区湛家园小学...",date:'2023-04-13'},
           {img:'./img/u19.png',title:"[汉川市中心] 汉川电厂四期扩建工程电力...",date:'2023-04-13'},
           {img:'./img/u19.png',title:"[红安县中心] 红安县2023年度小型水库安...",date:'2023-04-13'},
    ],
    postList4:[
           {img:'./img/u19.png',title:"[麻城市中心] 麻城经济开发区湛家园小学...",date:'2023-04-13'},
           {img:'./img/u19.png',title:"[麻城市中心] 麻城市农村公路管理局招标...",date:'2023-04-13'},
           {img:'./img/u19.png',title:"[麻城市中心] 麻城经济开发区湛家园小学...",date:'2023-04-13'},
           {img:'./img/u19.png',title:"[汉川市中心] 汉川电厂四期扩建工程电力...",date:'2023-04-13'},
           {img:'./img/u19.png',title:"[红安县中心] 红安县2023年度小型水库安...",date:'2023-04-13'},
    ],
   }
        },
        methods:{

        }
       }
       Vue.createApp(App).use(ElementPlus).mount("#app")
  </script>
</html>